<style></style>
<template>
  <div>
    <div class="i-layout-page-header">
      <i-page-header title="团队管理"></i-page-header>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <vxe-table
        :border="false"
        class="vxeTable mt25"
        highlight-hover-row
        highlight-current-row
        :loading="loading"
        ref="xTable"
        header-row-class-name="false"
        :tree-config="{ children: 'children', expandAll: true }"
        :data="memberLevelData"
      >
        <vxe-table-column
          field="id"
          title="ID"
          tooltip
          min-width="20"
        ></vxe-table-column>
        <vxe-table-column
          field="name"
          title="级别名称"
          min-width="20"
        ></vxe-table-column>
        <vxe-table-column
          field="code"
          title="CODE"
          min-width="20"
        ></vxe-table-column>

        <vxe-table-column field="update" title="升级条件" min-width="50">
          <template>
            <div></div>
          </template>
        </vxe-table-column>

        <vxe-table-column field="commission_lv" title="直推提成" min-width="50">
          <template v-slot="{ row }"> {{ row.zt }} % </template>
        </vxe-table-column>

        <vxe-table-column field="commission_lv" title="间推提成" min-width="50">
          <template v-slot="{ row }"> {{ row.lv }} % </template>
        </vxe-table-column>
        <vxe-table-column
          field="ceng"
          title="层级"
          width="80"
        ></vxe-table-column>
        <vxe-table-column field="action" title="操作" width="150" fixed="right">
          <template v-slot="{ row }">
            <a @click="edit(row)">编辑</a>
          </template>
        </vxe-table-column>
      </vxe-table>
    </Card>
    <div class="acea-row row-right page">
      <Page
        :total="page.pageCount"
        show-elevator
        show-total
        @on-change="tapPage"
        :page-size="page.pageSize"
      />
    </div>

    <Modal v-model="dialogVisible" title="编辑比例" @on-cancel="editClose">
      <el-form ref="data" :model="data" label-width="80px">
        <el-form-item label="级别名称" prop="title">
          {{ data.name }}
        </el-form-item>

        <el-form-item label="直推提成" prop="zt">
          <el-input placeholder="请输入直推提成" v-model="data.zt"></el-input>
        </el-form-item>

        <el-form-item label="间推提成" prop="lv">
          <el-input placeholder="请输入间推提成" v-model="data.lv"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subAdmin">确 定</el-button>
      </span>
    </Modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import IPageHeader from '@/layouts/system/page-header/index'
import util from '../../../libs/util'
import {
  SystemMemberMentorSave,
  SystemMemberMentor,
} from '../../../api/system/member'
import Setting from '../../../setting'
export default {
  name: 'mentor',
  components: { IPageHeader },
  data() {
    return {
      // 新
      loading: false,
      memberLevelData: [],
      upHeaders: {},
      dialogVisible: false,
      // 搜索区域
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      formValidate: {
        is_show: '',
        keyword: '',
      },
      page: {
        pageCount: 0, // 一共多少数量
        pageSize: 0, // 每一页码数量
        page: 1, // 当前页码
      },
      cateAr: [],
      data: {
        name: '',
        lv: 0,
        update: {
          one: 0,
          max_one: 0,
          count: 0,
        },
      },
    }
  },
  created() {
    this.initView()
  },
  methods: {
    initView: function () {
      this.getMemberLevel()
    },
    /**
     * 新闻列表
     */
    getMemberLevel() {
      this.loading = true
      this.formValidate.is_show = this.formValidate.is_show || ''

      var data = {
        keyword: this.formValidate.keyword,
        is_show: this.formValidate.is_show,
        page: this.page.page,
      }

      SystemMemberMentor(data)
        .then((res) => {
          if (res.code == 200) {
            this.memberLevelData = res.data.list
            this.loading = false
            this.page.pageSize = res.data.pageSize
            this.page.pageCount = res.data.pageCount
          } else {
            this.loading = false
            this.$alert(res.msg)
          }
        })
        .catch((res) => {
          console.log(res)
          this.loading = false
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    // 编辑
    edit(row) {
      this.data = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    /**
     * 关闭
     */
    editClose: function () {
      this.dialogVisible = false
    },
    /**
     * 修改数据
     */
    subAdmin: function () {
      this.$refs['data'].validate((valid) => {
        if (valid) {
          let loading = this.$loading('提交数据中...')
          SystemMemberMentorSave(this.data)
            .then((res) => {
              loading.close()
              if (res.code == 200) {
                this.dialogVisible = false
                this.$Message.success('操作成功')
                this.getMemberLevel()
              } else {
                this.$alert(res.msg, '系统提示')
              }
            })
            .catch((err) => {
              loading.close()
              this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
            })
        }
      })
    },
    /**
     * 分页
     */
    tapPage: function (index) {
      this.page.page = index
      this.SystemMemberMentor()
    },
  },
}
</script>
